import { OneModal } from '@/components/one-ui';
import { MaterialManageAPI } from '../common/type';
import { Ref, useRef, useState } from 'react';
import { IOneModalRef } from '@/pages/type';
import pageStyles from '@/common/pageLayout.less';
import { Col, Form, Input, Row, Select, message } from 'antd';
import { onCloseModalCommon } from '@/utils';
import { auditMaterialServices } from '../services';

export const MaterialCheckModal: React.FC<MaterialManageAPI.ICheckModal> = ({ onClose, selectKeys }) => {
  /**弹框的ref*/
  const checkModalRef: Ref<IOneModalRef> = useRef(null);

  /**表单的ref*/
  const [checkForm] = Form.useForm();

  /**文本框*/
  const [isChange, setIsChange] = useState<boolean>(false);

  /**审核方法Callback*/
  const auditMaterialCallback = (res) => {
    message.success(res?.msg);
    checkForm?.resetFields();
    onCloseModalCommon(checkModalRef);
    onClose(true);
  };

  /**审核方法services*/
  const { auditMaterialRun, auditMaterialLoading } = auditMaterialServices(auditMaterialCallback);

  /**关闭弹窗的方法*/
  const onCancelFun = () => {
    onClose();
  };

  /**弹窗确认的方法*/
  const onOkFun = () => {
    checkForm?.validateFields()?.then((res) => {
      let keys: Record<string, any>[] = [];
      selectKeys?.forEach((item) => {
        keys?.push(item?.mMaterialChecks?.[0]?.id);
      });
      auditMaterialRun({
        ...res,
        ids: keys?.join(','),
      });
    });
  };

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={checkModalRef}
        title={'批量审核物料'}
        onCancel={onCancelFun}
        onOk={onOkFun}
        width={document.body.clientWidth * 0.3}
        bodyStyle={{ padding: '8px 10px' }}
        confirmLoading={auditMaterialLoading}
      >
        <div>
          <div className={pageStyles['fromView-styles']}>
            <Form labelAlign="right" form={checkForm}>
              <Row>
                <Col span={24}>
                  <Form.Item
                    name="checkState"
                    label="审核结果"
                    rules={[
                      {
                        required: true,
                        message: '请选择审核结果',
                      },
                    ]}
                    initialValue={'1'}
                  >
                    <Select
                      placeholder="请选择审核结果"
                      loading={false}
                      onSelect={(val) => {
                        // const checkResult = auditForm?.getFieldValue('checkResult')
                        if (!isChange) {
                          let str = '';
                          if (val == '1') {
                            str = '通过';
                          } else if (val == '2') {
                            str = '退回';
                          } else if (val == '3') {
                            str = '作废';
                          } else {
                            str = '';
                          }
                          checkForm?.setFieldValue('checkResult', str);
                        }
                      }}
                    >
                      <Select.Option value={'1'}>通过</Select.Option>
                      <Select.Option value={'2'}>退回</Select.Option>
                      <Select.Option value={'3'}>作废</Select.Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label="审核原因"
                    name="checkResult"
                    rules={[
                      {
                        required: true,
                        message: '请填写审核结果',
                      },
                    ]}
                    initialValue={'通过'}
                  >
                    <Input.TextArea
                      placeholder={`请填写审核原因`}
                      showCount
                      maxLength={200}
                      autoSize={{ minRows: 3, maxRows: 5 }}
                      onChange={() => setIsChange(true)}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </div>
        </div>
      </OneModal>
    </>
  );
};
